Video 踩坑
video 标签 autoplay 无效问题
出现该问题的主要原因：为了避免多媒体标签自动播放产生不必要的流量、发出噪音等问题，规定了不为静音的标签不能自动播放，需要用户行为播放等操作，或者将多媒体标签定义为静音(添加 muted: true 属性)实现自动播放功能。
注：该问题主要出现在网页上，APP 内嵌网页或者 APP 可以通过 APP 配置信息解决，具体方法自行百度，以下方法是网页无需静音播放的解决方法。
方法一
- 直接获取 video 的 DOM 节点后执行 play() 方法，适用于主流浏览器、Android 主流浏览器，IOS 不适用。
参考资料：iOS 禁用 autoplay 相关资料
注：该方法微信浏览器存在兼容问题，需要添加以下代码兼容微信浏览器 (该方法无须引入微信 jssdk，微信浏览器内自带)
- vue 例子
<template>
<div>
<video id="myVideo" src="视频播放地址" />
</div>
</template>
<script>
export default {
created() {
this.videoPlay();
},
methods: {
doPlay() {
let video = document.getElementById("myVideo");
video.play();
},
videoPlay() {
if (!window.WeixinJSBridge) {
this.doPlay();
} else {
document.addEventListener(
"WeixinJSBridgeReady",
function () {
WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
this.doPlay();
});
},
false
);
}
},
},
};
</script>
方法二
- 从用户行为入手，从根本上解决问题，兼容主流 PC 端浏览器，Android、IOS 系统。
实现步骤：
在用户进入带有多媒体标签的页面前（点击跳转时）， createElement 一个多媒体标签对象，而后存入全局变量内。
在进入需要带有多媒体标签的页面后，将全局变量内的多媒体标签 appendChild 在页面内。
注：该方法需要定义全局 createElement 方法。最好携带多媒体 src 信息，不然刷新页面后多媒体标签会消失。
- Vue 例子通过存入 Vuex 实现，仅供参考
// main.js
import App from "./App";
import store from "./store";
import router from "./router";
new Vue({
el: "#app",
router,
store,
render: (h) => h(App),
});
// store/index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
videoElem: null,
},
mutations: {
setVideo(state, v) {
state.videoElem = v;
},
},
actions: {
newVideo({ commit, rootState }, src = "") {
return new Promise((resolve, reject) => {
if (rootState.videoElem) resolve();
let mp4 = document.createElement("video");
mp4.src = src ? src : getCookie("videoUrl");
// source 为视频封面，根据需求自行决定是否保留
let source = document.createElement("source");
source.src = `视频封面图`;
mp4.style.position = "absolute";
mp4.style.backgroundColor = "#000000";
mp4.style.top = 0;
mp4.style.left = 0;
mp4.style.width = "100%";
mp4.style.height = "100%";
// 禁用下载视频全屏功能（IOS不兼容，建议自定义 controls 功能）
mp4.setAttribute(
"controlslist",
"nodownload nofullscreen noremoteplayback noremote footbar"
);
// 关闭画中画（IOS不兼容，建议自定义 controls 功能）
mp4.setAttribute("disablePictureInPicture", true);
mp4.setAttribute("controls", "");
// 移动端兼容，具体参考文章结尾文档
mp4.setAttribute("playsinline", "true");
mp4.setAttribute("webkit-playsinline", "true");
mp4.setAttribute("x5-video-player-type", "h5-page");
commit("setVideo", mp4);
resolve();
});
},
},
});
export default store;
- 详情入口页
<template>
<button @click="jump">点击跳转到视频详情页</button>
</template>
<script>
import {
mapActions
} from 'vuex'
export default {
methods: {
...mapActions('user', ['newVideo']),
jump(){
this.newVideo('视频地址').then(() => {
this.$router.push({
path: "/viewVideo",
query: {
src: "视频地址"
}
});
})
}
}
}
- 需要带有多媒体标签的页面
<!-- viewVideo -->
<template>
<div id="videoWrap"></div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
data() {
return {
src: "",
};
},
created() {
const { src } = this.$route.query;
this.src = src;
this.$nextTick(() => {
this.newVideo(src).then(() => {
document.getElementById("videoWrap").appendChild(this.videoElem);
this.$nextTick(() => {
this.videoElem.play();
});
});
});
},
computed: {
...mapState("user", ["videoElem"]),
},
methods: {
...mapActions("user", ["newVideo"]),
},
};
</script>
video 标签，微信浏览器内小窗口播放
- 添加 x5-playsinline 属性
<video src="src地址" autoplay x5-playsinline />
Powered by Waline v2.15.8